<template>
  <div>
    <!-- 头部导航 -->
    <div>
      <van-nav-bar class="header" fixed>
        <template v-slot:left>
          <img src="" alt="" />
        </template>
        <template #right>
          <van-icon name="search" class="search_icon" size="0.48rem" 
color="#fff"  @click="moveSearchPageFn" />
        </template>
      </van-nav-bar>
    </div>
    <!-- 每个van-tab代表一个标签导航，中间夹着内容，对应的下属列表内容 -->
    <!-- 每个van-tab都对应独立的ArticleList -->
    <div class="main">
      <van-tabs v-model="active" @change="channelChangeFn" animated sticky offset-top="1.226667rem">
        <van-tab :title="obj.name" v-for="obj in userChannelList" :key="obj.id" :name="obj.id">
          <ArticleList :active="active"></ArticleList>
        </van-tab>
      </van-tabs>
      <van-icon name="plus" size="0.48rem" class="moreChannels" @click="plusClickFn" />
    </div>

    <!-- 频道管理弹出层 -->
    <van-popup class="channel_popup" get-container="body" v-model="show">
      <ChannelEdit :userList="userChannelList" :unCheckList="unCheckChannelList" @addChannelEV="addChannelFn" @removeChannelEV="removeChannelFn" @closeEV="closeFn" @clickEV="closeFn" ref="editRef" v-model="active"></ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannelsAPI, getAllChannelsAPI, updateChannelsAPI, removeTheChannelAPI } from '@/api'
import ArticleList from './components/ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
export default {
  data() {
    return {
      active: 0, // 激活频道id（默认频道）
      userChannelList: [], // 用户选择频道列表
      allChannelList: [], // 所有频道列表
      // articleList: [] // 文章列表
      show: false, //频道弹出层显示/隐藏
      chanelScrollTObj: {} //保存每个频道的滚动位置
    }
  },
  async created() {
    // 频道列表
    const res = await getUserChannelsAPI()
    console.log(res)
    this.userChannelList = res.data.data.channels
    // this.channelChangeFn()
    // 所有频道列表
    const res2 = await getAllChannelsAPI()
    console.log(res2)
    this.allChannelList = res2.data.data.channels
  },
  methods: {
    // tab切换的事件->获取文章列表数据
    async channelChangeFn() {
      //   const res2 = await getAllArticleListlsAPI({
      //     channel_id: this.active,
      //     timestamp: new Date().getTime()
      //   })
      //   console.log(res2)
      //   this.articleList = res2.data.data.results
      // }

      //tab切换以后，设置滚动条位置
      //tab切换时，这个组件内部，会把切走的容器height设置为0，滚动条因为没有高度回到了顶部
      //切回来的易损件，没有高度，滚动事件从底下上来,所以才把数据设置为0
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.chanelScrollTObj[this.active]
        document.body.scrollTop = this.chanelScrollTObj[this.active]
      })
    },
    // +号方法
    plusClickFn() {
      this.show = true
    },
    // 添加频道
    async addChannelFn(channelObj) {
      this.userChannelList.push(channelObj)

      const newArr = this.userChannelList.filter((obj) => obj.id !== 0)
      const theNewArr = newArr.map((obj, index) => {
        const newObj = { ...obj }
        delete newObj.name
        newObj.seq = index
        return newObj
      })
      const res = await updateChannelsAPI({
        channels: theNewArr
      })
      console.log(res)
    },
    // 删除频道
    async removeChannelFn(channelObj) {
      const index = this.userChannelList.findIndex((obj) => obj.id === channelObj.id)
      this.userChannelList.splice(index, 1)
      const res = await removeTheChannelAPI({
        channelId: channelObj.id
      })
      console.log(res)
    },
    // 关闭弹出层
    closeFn() {
      this.show = false
      this.$refs.editRef.isEdit = false
    },
    moveSearchPageFn() {
      this.$router.push('/search')
    },
    scrollFn() {
      //谷歌浏览器的内核和安卓的内核不一样
      //谷歌浏览器用的是html的scrollTop
      //有的浏览器用的body的scrollTop
      // Notify({
      //   messge: document.body.scrollTop
      // })
      this.$route.meta.scrollT = document.documentElement.scrollTop || document.body.scrollTop
      //同时保存当前频道的滚动距离
      this.chanelScrollTObj[this.active] = document.documentElement.scrollTop || document.body.scrollTop
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  // 计算属性
  computed: {
    // 把所有频道数组挨个对象取出，去用户已选频道数组里查找，如果找不到，则让filter创建一个新数组
    unCheckChannelList() {
      const newArr = this.allChannelList.filter((bigObj) => {
        const index = this.userChannelList.findIndex((smallObj) => {
          return smallObj.id === bigObj.id
        })
        // 如果找到了
        if (index > -1) {
          return false
        } else {
          return true
        }
      })
      return newArr
    }
  },
  activated() {
    console.log(this.$route)
    window.addEventListener('scroll', this.scrollFn)
    //window和document，监听网页滚动的事件
    //html标签获取scrollTop，滚动的距离，和设置滚动的位置
    //立刻设置，滚动条位置
    document.documentElement.scrollTop = this.$route.meta.scrollT
    document.body.scrollTop = this.$route.meta.scrollT
  },
  deactivated() {
    window.removeEventListener('scroll', this.scrollFn)
  }
}
</script>

<style lang="less" scoped>
/deep/.header{
  height: 1.266666666rem;
}
.main {
 
  padding-top: 1.266666666rem;
}
//设置tabs容器的样式
/deep/.van-tabs_wrap { 
  position: relative;
  padding-top: 1.1733333rem;
  padding-right: 30px;
  background-color: #fff;
  
}
.search_icon{
padding-top:0.3333333rem;
}
//设置小图标的样式
.moreChannels {
  position: absolute;
  top:1.6rem;
  right: 3px;
  background-color: white;
  z-index: 999;
}
.channel_popup {
  width: 100vw;
  height: 100vh;
}
</style>
